<template>
  <!-- 六合彩开奖 -->
  <!-- 外包裹 -->
  <div id="wrap">
      <!-- 日期位 -->
    <div class="dateDiv">
        <calender  date-tools-key="2" :kaijiang-day="kajiangDay" :jiaozhu-day="jiaozhuDay">

        </calender>
    </div>
      <!-- 期号 开奖号码 -->
    <div class="kaijiang">

        <!-- title文字 -->
        <p class="titleText">
            <span class="number1">期号</span>
            <span class="number2">开奖号码</span>
        </p>

        <!-- 开奖信息内容 -->
        <ul class="content">
          <li :class="index === winningInfo.length-1?'last':''" v-for="(item,index) in winningInfo" :key="index">

            <div>
              <span class="number1">{{ item.series }}</span>
              <span class="numberSum">{{sum(item.numbers.split(','))}}</span>
            </div>
            
            <div class="line2">
              <span :class="indexs===0?'borders':''" v-for="(items,indexs) in item.numbers.split(',')" :key="indexs">{{ items }}</span>
            </div>

          </li>
        </ul>

        <!-- 查看走势 -->
        <p class="trend hover-style">
            查看完整走势>> 
        </p>

        <!-- <DatePicker confirm="true" open="true" type="daterange" placement="top-start" placeholder="Select" style="width: 200px"></DatePicker> -->
    </div>
  </div>
</template>

<script>
import calender from './components/bc-calender'
import { sumArr } from '@/assets/js/util'

export default {
    name: 'liuhecai',
    components:{
      calender
    },
    props: {
      winningInfo: {
        type: Array,
        default: []
      }
    },
    data(){
      return{
        jiaozhuDay: ['20190602','20190612','20190609'],
        kajiangDay: ['20190601','20190606','20190605'],
        kaijiang:[
          {
              qihao: '819049',
              number: ['30','24','25','22','43','32','11']
          },
          {
              qihao: '819049',
              number: ['30','24','25','22','43','32','11']
          },
          {
              qihao: '819049',
              number: ['30','24','25','22','43','32','11']
          },
          {
              qihao: '819049',
              number: ['30','24','25','22','43','32','11']
          },
          {
              qihao: '819049',
              number: ['30','24','25','22','43','32','11']
          },
          {
              qihao: '819049',
              number: ['30','24','25','22','43','32','11']
          },
        ]
      }
    },
    create() {
      console.log(this.winningInfo)
    },
    methods:{
      sum(arr){
        return sumArr(arr)
      }
    }
    
}
</script>

<style lang="stylus" scoped>

    //外包裹
    #wrap
      width 200px;
      float left
      margin-top 2px
      //日期占位
      .dateDiv
        width 198px;
        height  227px;
        border-radius 3px;
        // border 1px solid #dbd3d3;
      //日期 开奖号码
      .kaijiang
        // height 355px;
        width 198px;
        margin-top 10px;
        border-radius 3px;
        p.titleText
          width 198px;
          height 36px;
          // margin-top 10px;
          background-color #222836;
          color #fff;
          font-size 15px
          line-height 36px;
          font-weight 700;
          border-top-left-radius 3px;
          border-top-right-radius 3px;
          span 
            float left;
          .number1
            width 115px;
            text-align left;
            text-indent 21px;
          .number2
            width 83px;
            text-align left;
      //开奖信息内容
      .content
        width 196px;
        border 1px solid #dbd3d3;
        border-top 1px solid transparent;
        list-style none;
        background #f8f5f5 
        // border-bottom-left-radius 3px;
        // border-bottom-right-radius 3px;
        li
          width 176px;
          height 30px
          margin 10px auto 10px;
          font-size 0;
          div
            font-size 10px;
            line-height 10px;
            margin-bottom 6px;
            .numberSum
              font-size 10px;
              line-height 10px;
              float right;
              width 50px;
              border-left 1px solid #dbd3d3;
              border-right 1px solid #dbd3d3;
              text-align center;
          .line2
            span 
              float left;
              width 24px;
              border-right 1px solid #dbd3d3;
              text-align center;
              color #e02828;
            .borders
              border-left 1px solid #dbd3d3;
        .last
          margin-bottom 7px;
      .trend
        width 196px;
        height 38px;
        border 1px solid #dbd3d3;
        border-top none;
        border-bottom-left-radius 3px;
        border-bottom-right-radius 3px;
        line-height 38px;
        text-align center;
        color #8c8f98;
        font-size 12px;
        cursor pointer;
        background #f8f4f3
</style>

